<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 商品数据
const product = ref({
  name: '浪漫红玫瑰花束',
  rating: 4.8,
  reviewCount: 128,
  price: 199.00,
  originalPrice: 259.00,
  description: '精选19朵顶级厄瓜多尔红玫瑰，搭配尤加利叶、满天星，赠送精美贺卡。玫瑰代表浓烈的爱，是表达爱意的永恒经典之选。',
  flowerLanguage: '热烈的爱，永恒的承诺，浓情似火。',
  stock: 98,
  mainImage: 'https://images.unsplash.com/photo-1586968895917-80585d521b92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80',
  thumbnails: [
    'https://images.unsplash.com/photo-1586968895917-80585d521b92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80',
    'https://images.unsplash.com/photo-1561181286-d5b4e8f44178?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80',
    'https://images.unsplash.com/photo-1556702353-08bdc2df387f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80',
    'https://images.unsplash.com/photo-1587052755556-89808205c097?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80'
  ]
});

// 选择状态
const selectedSpec = ref('19朵');
const selectedPackage = ref('精美包装');
const quantity = ref(1);
const selectedThumbnail = ref(0);
const activeTab = ref('details');

// 规格选项
const specs = ['19朵', '33朵', '52朵', '99朵'];
const packages = ['精美包装', '豪华礼盒', '简约风格'];

// 相关产品
const relatedProducts = [
  {
    id: 2,
    name: '缤纷混合花束',
    price: 259,
    image: 'https://images.unsplash.com/photo-1533616688419-b7a585564566?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  },
  {
    id: 3,
    name: '阳光向日葵花束',
    price: 229,
    image: 'https://images.unsplash.com/photo-1563241527-3004b7be0ffd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  },
  {
    id: 4,
    name: '彩色郁金香花束',
    price: 289,
    image: 'https://images.unsplash.com/photo-1526047932273-341f2a7631f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  },
  {
    id: 5,
    name: '甜蜜粉玫瑰花束',
    price: 239,
    image: 'https://images.unsplash.com/photo-1561181286-d5b4e8f44178?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80'
  }
];

// 方法
const selectSpec = (spec: string) => {
  selectedSpec.value = spec;
};

const selectPackage = (pkg: string) => {
  selectedPackage.value = pkg;
};

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--;
  }
};

const increaseQuantity = () => {
  if (quantity.value < 99) {
    quantity.value++;
  }
};

const selectThumbnail = (index: number) => {
  selectedThumbnail.value = index;
  product.value.mainImage = product.value.thumbnails[index];
};

const setActiveTab = (tab: string) => {
  activeTab.value = tab;
};

const addToCart = () => {
  // 添加到购物车逻辑
  console.log('添加到购物车', {
    product: product.value.name,
    spec: selectedSpec.value,
    package: selectedPackage.value,
    quantity: quantity.value
  });
};

const buyNow = () => {
  // 立即购买逻辑
  console.log('立即购买');
};

const addToFavorites = () => {
  // 添加到收藏逻辑
  console.log('添加到收藏');
};

const goToProductDetail = (productItem: any) => {
  router.push('/product-detail');
};
</script>

<template>
  <div class="min-h-screen flex flex-col" style="background-color: #f8f8f8;">
    <!-- 导航栏 -->
    <header class="bg-white p-4 border-b border-gray-200 shadow-sm">
      <div class="container mx-auto flex items-center justify-between">
        <a @click.prevent="router.push('/')" href="#" class="text-2xl font-bold text-rose-500 flex items-center">
          <font-awesome-icon icon="seedling" class="text-rose-500 mr-2" />
          花礼相伴
        </a>
        <div class="hidden lg:block w-1/3">
          <div class="relative">
            <input type="text" placeholder="搜索鲜花、场景..." 
              class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
            <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
          </div>
        </div>
        <nav class="hidden md:flex space-x-6">
          <a @click.prevent="router.push('/')" href="#" class="text-gray-600 hover:text-rose-500">首页</a>
          <a @click.prevent="router.push('/categories')" href="#" class="text-gray-600 hover:text-rose-500">分类</a>
          <a @click.prevent="router.push('/cart')" href="#" class="text-gray-600 hover:text-rose-500">购物车</a>
        </nav>
        <div class="flex items-center space-x-4">
          <a @click.prevent="router.push('/cart')" href="#" class="p-2 relative">
            <font-awesome-icon icon="shopping-cart" class="text-gray-600 text-xl" />
            <span class="absolute top-0 right-0 bg-rose-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">3</span>
          </a>
          <a @click.prevent="router.push('/login')" href="#" class="hidden md:block text-gray-600 hover:text-rose-500">登录</a>
          <a @click.prevent="router.push('/register')" href="#" class="hidden md:block text-white bg-rose-500 px-4 py-2 rounded-lg hover:bg-rose-600 transition duration-300">注册</a>
        </div>
      </div>
      <!-- 移动端搜索栏 -->
      <div class="mt-3 relative md:hidden">
        <input type="text" placeholder="搜索鲜花、场景..." 
          class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
        <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
      </div>
    </header>

    <!-- 主体内容区域 -->
    <main class="flex-grow container mx-auto px-4 py-6">
      <!-- 面包屑导航 -->
      <nav class="text-sm mb-6">
        <ol class="flex flex-wrap">
          <li class="flex items-center">
            <a @click.prevent="router.push('/')" href="#" class="text-gray-500 hover:text-rose-500">首页</a>
            <span class="mx-2 text-gray-400">/</span>
          </li>
          <li class="flex items-center">
            <a @click.prevent="router.push('/categories')" href="#" class="text-gray-500 hover:text-rose-500">爱情鲜花</a>
            <span class="mx-2 text-gray-400">/</span>
          </li>
          <li>
            <span class="text-gray-700">{{ product.name }}</span>
          </li>
        </ol>
      </nav>

      <!-- 产品详情 -->
      <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="flex flex-col md:flex-row">
          <!-- 产品图片区域 -->
          <div class="w-full md:w-1/2">
            <div class="p-4">
              <!-- 主图 -->
              <div class="mb-4 rounded-lg overflow-hidden">
                <img 
                  :src="product.mainImage" 
                  :alt="product.name" 
                  class="w-full h-80 md:h-96 object-cover"
                >
              </div>
              <!-- 缩略图 -->
              <div class="grid grid-cols-4 gap-2">
                <div 
                  v-for="(thumbnail, index) in product.thumbnails" 
                  :key="index"
                  @click="selectThumbnail(index)"
                  :class="[
                    'rounded-md overflow-hidden cursor-pointer',
                    selectedThumbnail === index 
                      ? 'border-2 border-rose-500' 
                      : 'border border-gray-200'
                  ]"
                >
                  <img 
                    :src="thumbnail" 
                    :alt="`${product.name} - 角度${index + 1}`" 
                    class="w-full h-20 object-cover"
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- 产品信息区域 -->
          <div class="w-full md:w-1/2 p-4 md:p-6 lg:p-8">
            <h1 class="text-xl md:text-2xl lg:text-3xl font-bold text-gray-800 mb-2">{{ product.name }}</h1>
            <div class="flex items-center mb-4">
              <div class="flex text-yellow-400">
                <font-awesome-icon icon="star" />
                <font-awesome-icon icon="star" />
                <font-awesome-icon icon="star" />
                <font-awesome-icon icon="star" />
                <font-awesome-icon icon="star-half-alt" />
              </div>
              <span class="text-gray-500 ml-2">{{ product.rating }} ({{ product.reviewCount }}条评价)</span>
            </div>
            <div class="mb-6">
              <p class="text-3xl text-rose-500 font-bold">¥{{ product.price.toFixed(2) }}</p>
              <p class="text-gray-500 line-through">¥{{ product.originalPrice.toFixed(2) }}</p>
            </div>
            <div class="border-t border-gray-100 py-4">
              <div class="mb-4">
                <h3 class="text-gray-700 font-medium mb-2">商品描述：</h3>
                <p class="text-gray-600">{{ product.description }}</p>
              </div>
              <div class="mb-4">
                <h3 class="text-gray-700 font-medium mb-2">花语：</h3>
                <p class="text-gray-600">{{ product.flowerLanguage }}</p>
              </div>
            </div>
            <div class="mb-6">
              <h3 class="text-gray-700 font-medium mb-2">规格：</h3>
              <div class="flex flex-wrap gap-2">
                <button 
                  v-for="spec in specs" 
                  :key="spec"
                  @click="selectSpec(spec)"
                  :class="[
                    'px-4 py-2 border rounded-lg font-medium',
                    selectedSpec === spec 
                      ? 'border-rose-500 text-rose-500 bg-rose-50' 
                      : 'border-gray-300 text-gray-700'
                  ]"
                >
                  {{ spec }}
                </button>
              </div>
            </div>
            <div class="mb-6">
              <h3 class="text-gray-700 font-medium mb-2">包装选择：</h3>
              <div class="flex flex-wrap gap-2">
                <button 
                  v-for="pkg in packages" 
                  :key="pkg"
                  @click="selectPackage(pkg)"
                  :class="[
                    'px-4 py-2 border rounded-lg font-medium',
                    selectedPackage === pkg 
                      ? 'border-rose-500 text-rose-500 bg-rose-50' 
                      : 'border-gray-300 text-gray-700'
                  ]"
                >
                  {{ pkg }}
                </button>
              </div>
            </div>
            <div class="mb-6">
              <h3 class="text-gray-700 font-medium mb-2">数量：</h3>
              <div class="flex items-center">
                <button 
                  @click="decreaseQuantity"
                  class="w-8 h-8 border border-gray-300 rounded-l text-gray-600 hover:bg-gray-100 flex items-center justify-center"
                >
                  -
                </button>
                <input 
                  v-model="quantity" 
                  type="text" 
                  class="border-t border-b border-gray-300 text-center w-12 h-8" 
                  readonly
                >
                <button 
                  @click="increaseQuantity"
                  class="w-8 h-8 border border-gray-300 rounded-r text-gray-600 hover:bg-gray-100 flex items-center justify-center"
                >
                  +
                </button>
                <span class="ml-4 text-gray-500">库存: {{ product.stock }}件</span>
              </div>
            </div>
            <div class="flex flex-wrap gap-4">
              <button 
                @click="addToCart"
                class="flex-1 md:flex-none md:w-48 px-6 py-3 bg-rose-500 text-white rounded-lg font-medium hover:bg-rose-600 transition duration-300 flex items-center justify-center"
              >
                <font-awesome-icon icon="shopping-cart" class="mr-2" /> 
                加入购物车
              </button>
              <button 
                @click="buyNow"
                class="flex-1 md:flex-none md:w-48 px-6 py-3 border border-rose-500 text-rose-500 rounded-lg font-medium hover:bg-rose-50 transition duration-300 flex items-center justify-center"
              >
                立即购买
              </button>
              <button 
                @click="addToFavorites"
                class="md:ml-2 w-12 h-12 flex items-center justify-center border border-gray-300 rounded-lg text-gray-600 hover:text-rose-500 hover:border-rose-500 transition duration-300"
              >
                <font-awesome-icon :icon="['far', 'heart']" class="text-xl" />
              </button>
            </div>
            <div class="mt-6 flex items-center text-sm text-gray-500">
              <div class="flex items-center mr-6">
                <font-awesome-icon icon="shield-alt" class="mr-1 text-green-500" /> 
                <span>花店直营</span>
              </div>
              <div class="flex items-center mr-6">
                <font-awesome-icon icon="truck" class="mr-1 text-green-500" /> 
                <span>当日送达</span>
              </div>
              <div class="flex items-center">
                <font-awesome-icon icon="sync-alt" class="mr-1 text-green-500" /> 
                <span>七天无理由退换</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 产品详情选项卡 -->
        <div class="border-t border-gray-200">
          <div class="flex border-b border-gray-200">
            <button
              @click="setActiveTab('details')"
              :class="[
                'px-6 py-3 font-medium',
                activeTab === 'details'
                  ? 'text-rose-500 border-b-2 border-rose-500'
                  : 'text-gray-600'
              ]"
            >
              商品详情
            </button>
            <button
              @click="setActiveTab('reviews')"
              :class="[
                'px-6 py-3 font-medium',
                activeTab === 'reviews'
                  ? 'text-rose-500 border-b-2 border-rose-500'
                  : 'text-gray-600'
              ]"
            >
              用户评价({{ product.reviewCount }})
            </button>
            <button
              @click="setActiveTab('shipping')"
              :class="[
                'px-6 py-3 font-medium',
                activeTab === 'shipping'
                  ? 'text-rose-500 border-b-2 border-rose-500'
                  : 'text-gray-600'
              ]"
            >
              配送说明
            </button>
          </div>
          <div class="p-6">
            <div v-if="activeTab === 'details'">
              <h3 class="text-lg font-bold mb-4">商品详情</h3>
              <div class="space-y-4 text-gray-600">
                <p>【花材】精选19朵顶级厄瓜多尔红玫瑰，搭配尤加利叶、满天星点缀。</p>
                <p>【包装】环保牛皮纸包装，精美丝带系成蝴蝶结，赠送精美贺卡一张。</p>
                <p>【花艺师寄语】红玫瑰象征着热烈的爱与深深的祝福，是表达爱意的不二之选。</p>
                <p>【适用场景】表白、恋爱纪念日、求婚、情人节、生日等，适合送给恋人、爱人等。</p>

                <div>
                  <h4 class="font-medium mb-2">【保鲜小贴士】</h4>
                  <ol class="list-decimal list-inside space-y-1 pl-4">
                    <li>收到花束后，请斜剪花茎底部1-2厘米，然后插入清水中。</li>
                    <li>每天更换清水，并重新修剪花茎。</li>
                    <li>避免阳光直射，远离热源，放置在通风良好的地方。</li>
                    <li>如赠送的是鲜花保鲜液，请按说明使用。</li>
                  </ol>
                </div>
              </div>
              <div class="mt-6 space-y-4">
                <img
                  src="https://images.unsplash.com/photo-1577090727079-a854293d7cd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80"
                  alt="红玫瑰花束细节"
                  class="w-full rounded-lg"
                >
                <img
                  src="https://images.unsplash.com/photo-1494972308805-463bc619d34e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80"
                  alt="包装展示"
                  class="w-full rounded-lg"
                >
              </div>
            </div>
            <div v-else-if="activeTab === 'reviews'">
              <h3 class="text-lg font-bold mb-4">用户评价</h3>
              <p class="text-gray-600">暂无评价内容</p>
            </div>
            <div v-else-if="activeTab === 'shipping'">
              <h3 class="text-lg font-bold mb-4">配送说明</h3>
              <p class="text-gray-600">配送说明内容</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 相关产品推荐 -->
      <section class="mt-8">
        <h2 class="text-xl font-bold mb-4">相关产品推荐</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
          <a
            v-for="relatedProduct in relatedProducts"
            :key="relatedProduct.id"
            @click.prevent="goToProductDetail(relatedProduct)"
            href="#"
            class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300"
          >
            <img
              :src="relatedProduct.image"
              :alt="relatedProduct.name"
              class="w-full h-36 md:h-48 object-cover"
            >
            <div class="p-3 md:p-4">
              <h3 class="font-medium md:text-lg truncate">{{ relatedProduct.name }}</h3>
              <p class="text-rose-500 font-bold mt-1 md:mt-2 md:text-lg">¥{{ relatedProduct.price }}</p>
            </div>
          </a>
        </div>
      </section>
    </main>
  </div>
</template>

<style scoped>
a {
  cursor: pointer;
}
</style>
